<template>
  <vue3-seamless-scroll
    :list="formState"
    class="scroll"
    :step="step"
    :hover="true"
    ref="scroll"
    :singleHeight="leading"
  >
    <div
      class="flex content px-10px text-white text-16px text-center"
      :style="{lineHeight: `${leading}px`}"
      v-for="(item,index) in formState"
      :key="index"
    >

      <slot :item="item"></slot>
    </div>
  </vue3-seamless-scroll>
</template>

<script setup>
// https://blog.csdn.net/m0_71125105/article/details/131839087
import { ref, computed } from 'vue'

const emit = defineEmits(['update:modelValue'])

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({})
  },
  step: {
    type: Number,
    default: 0.5
  },
  leading: {
    // 单行高度
    type: Number,
    default: 35
  }
})

const scroll = ref()
const formState = computed({
  get() {
    // console.log(scroll.value?.$el?.clientHeight)
    // 如果不够则补齐
    // if (props.leading * props.modelValue.length < scroll.value?.$el?.clientHeight) {
    //   // return [...props.modelValue, ...props.modelValue]
    //   return Array(props.modelValue.length * 2).fill(...props.modelValue);
    // } else {
    //   return props.modelValue
    // }

    // props.modelValue中差几个，差几个就填充几个 填满scroll
    if (props.leading * props.modelValue.length <= scroll.value?.$el?.clientHeight) {
      const requiredCount = Math.ceil(scroll.value?.$el?.clientHeight / props.leading)

      // 填充缺少的元素直至填满scroll
      let filledArray = [...props.modelValue]
      while (filledArray.length <= requiredCount) {
        filledArray = [...filledArray, ...props.modelValue]
      }

      // return filledArray.slice(0, requiredCount) // 只返回完全填满scroll的部分
      return filledArray
    } else {
      return props.modelValue
    }
  },
  set(value) {
    console.log(value)
    emit('update:modelValue', value)
  }
})

</script>

<style scoped>
.scroll {
    /* height: 200px; */
    overflow: hidden;
}

</style>
